<template>
  <div class="advanced-search-box">
      <Form
        :model="modeForm"
        ref="modeForm"
        disabled
        label-position="right"
        :label-width="120"
      >
        <PartitionTitle title="任务安排"></PartitionTitle>
        <Row :gutter="10" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item :label="'大类:'"  prop="stype">
              <Select transfer filterable clearable v-model="modeForm.stype">
                <Option v-for="item in categoryInitiatives" :value="item.key" :key="item.key">{{
                  item.value
                }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>

        <Row :gutter="10" class="code-row-bg">
          <Col span="12" style="border: none">
            <Form-item :label="'小类:'"  prop="mtype">
              <Select transfer filterable clearable v-model="modeForm.mtype">
                <Option  v-for="item in detailsInitiatives" :value="item.key" :key="item.key">{{
                  item.value
                }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>

        <Row :gutter="10">
          <Col span="24">
              <Form-item label="重点任务:" prop="highTask">
                <Input v-model="modeForm.highTask" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
              </Form-item>
            </Col>
        </Row>

        <PartitionTitle title="2024年任务计划"></PartitionTitle>
        <Row :gutter="10" class="code-row-bg">
          <Col span="12">
            <Form-item :label="'重要程度:'" prop="importance">
              <Select transfer v-model="modeForm.importance" clearable>
                <Option v-for="item in importist" :value="item.key" :key="item.key">{{
                  item.value
                }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
  
        <Row :gutter="10">
          <Col span="24">
              <Form-item label="落实举措：" prop="taskMode">
                <Input v-model="modeForm.taskMode" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
              </Form-item>
            </Col>
        </Row>
  
        <Row :gutter="10">
          <Col span="24">
              <Form-item label="预期成果：" prop="taskPreRs">
                <Input v-model="modeForm.taskPreRs" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
              </Form-item>
            </Col>
        </Row>
  
        <Row :gutter="10">
          <Col span="24">
              <Form-item label="指标名称:" prop="indexName">
                <Input v-model="modeForm.indexName" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
              </Form-item>
            </Col>
        </Row>
  
        <Row :gutter="10">
          <Col span="24">
              <Form-item label="指标说明和计算方法:" prop="indexCalculationMethod">
                <Input v-model="modeForm.indexCalculationMethod" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
              </Form-item>
            </Col>
        </Row>
  
        <Row :gutter="10">
          <Col span="24">
              <Form-item label="本年度预期指标值:" prop="expectedIndicator">
                <Input v-model="modeForm.expectedIndicator" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
              </Form-item>
            </Col>
        </Row>

        <Row :gutter="10">
          <Col span="12">
            <Form-item :label="'责任部门:'" prop="dpart">
              <Select transfer v-model="modeForm.dpart" clearable multiple>
                <Option v-for="item in departList" :value="item.key" :key="item.key">{{
                  item.value
                }}</Option>
              </Select>
            </Form-item>
          </Col>
        </Row>
      </Form>

      <Form
        :model="searchForm"
        ref="searchForm"
        :rules="ruleValidate"
        label-position="right"
        :disabled="mode == 'look'"
        :label-width="120"
      >
        <template>
          <PartitionTitle title="2024年任务完成情况-中期更新"></PartitionTitle>
          <Row :gutter="10">
            <Col span="12">
              <Form-item :label="'是否完成:'" prop="isFinishedOnMid" :disabled="isEnd">
                <Select v-model="searchForm.isFinishedOnMid" clearable>
                  <Option v-for="item in completeStatus" :value="item.key" :key="item.key">{{
                    item.value
                  }}</Option>
                </Select>
              </Form-item>
            </Col>
          </Row>
          <Row :gutter="10">
            <Col span="24">
                <Form-item label="取得成果:" prop="actualAchievementOnMid" :disabled="isEnd">
                  <Input v-model="searchForm.actualAchievementOnMid" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
                </Form-item>
              </Col>
          </Row>
          <Row :gutter="10">
            <Col span="24">
                <Form-item label="成功关键指标2023年底指标值:" prop="keyIndexOnMid" :disabled="isEnd">
                  <Input v-model="searchForm.keyIndexOnMid" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
                </Form-item>
              </Col>
          </Row>
          <Row :gutter="10">
            <Col span="24">
                <Form-item label="备注:" prop="todoOnMid" :disabled="isEnd">
                  <Input v-model="searchForm.todoOnMid" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
                </Form-item>
              </Col>
          </Row>
        </template>
        
        <!-- 期末 -->
        <template v-if="isEnd">
          <PartitionTitle title="2024年任务完成情况-期末更新"></PartitionTitle>
          <Row :gutter="10">
            <Col span="12">
              <Form-item :label="'是否完成:'" prop="isFinishedOnEnd">
                <Select v-model="searchForm.isFinishedOnEnd" clearable>
                  <Option v-for="item in completeStatus" :value="item.key" :key="item.key">{{
                    item.value
                  }}</Option>
                </Select>
              </Form-item>
            </Col>
          </Row>
          <Row :gutter="10">
            <Col span="24">
                <Form-item label="取得成果:" prop="actualAchievementOnEnd">
                  <Input v-model="searchForm.actualAchievementOnEnd" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
                </Form-item>
              </Col>
          </Row>
          <Row :gutter="10">
            <Col span="24">
                <Form-item label="成功关键指标2023年底指标值:" prop="keyIndexOnEnd">
                  <Input v-model="searchForm.keyIndexOnEnd" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
                </Form-item>
              </Col>
          </Row>
          <Row :gutter="10">
            <Col span="24">
                <Form-item label="备注:" prop="todoOnEnd">
                  <Input v-model="searchForm.todoOnEnd" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入"></Input>
                </Form-item>
              </Col>
          </Row>
        </template>
      </Form>
      <div class="foot-btn-box" v-if="mode == 'update'">
        <RPButton text="取消" @click="handleClose"/>
        <RPButton text="保存" ghost  @click="handleSubmit('save')"/>
        <RPButton optType="create" type="info" text="提交审批" @click="handleSubmit('approval')"/>
      </div>
  </div>
  
  </template>
  
  <script>
  import {importist,departList,completeStatus } from '../dataConfig.js'
  import PartitionTitle from '@/components/common/PartitionTitle.vue'
  import coverApi from '@/api/cover'
  export default {
    props: {
      categoryInitiatives: {
        type: Array,
        default: () => []
      },
      fromPage: {
        type: String,
        default() {
          return "";
        }
      },
      mode:{
        type: String,
        default() {
          return "look";
        }
      },
      id:{
        type: String,
        default() {
          return "";
        }
      }
    },
    components: {
      PartitionTitle
    },
    data() {
      return {
        detailsInitiatives:[],
        departList,
        importist,
        completeStatus,
        modeForm: {
          stype: null,
          mtype: null,
          highTask: '',
          importance: '',
          dpart:[],
          taskMode:"",
          taskPreRs:"",
          indexName:"",
          indexCalculationMethod:"",
          expectedIndicator:""
        },
        searchForm:{
          isFinishedOnMid:"",
          isFinishedOnEnd:"",
          actualAchievementOnMid:"",
          actualAchievementOnEnd:"",
          keyIndexOnMid:"",
          keyIndexOnEnd:"",
          todoOnMid:"",
          todoOnEnd:"",
          taskQuarter:""
        },
        isEnd:false,
        ruleValidate:{
          isFinishedOnMid: [
            { required: true, message: '请选择是否完成', trigger: 'change' }
          ],
          isFinishedOnEnd: [
            { required: true, message: '请选择是否完成', trigger: 'change' }
          ],
          actualAchievementOnMid: [
            { required: true, message: '请输入取得成果', trigger: 'blur' }
          ],
          actualAchievementOnEnd: [
            { required: true, message: '请输入取得成果', trigger: 'blur' }
          ],
          keyIndexOnMid: [
            { required: true, message: '请输入关键指标', trigger: 'blur' }
          ],
          keyIndexOnEnd: [
            { required: true, message: '请输入关键指标', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.$emit("SetTitle", "2024年任务完成情况更新");
      this.$emit("SetPageMinHeight", 300);
      this.$emit("SetPageWidth", 900);
      if(this.id){
        this.getHighTaskDetail()
      }
    },
  
    methods: {
      handleClose() {
        this.$emit("Close",false);
      },
  
      //获取详情
      getHighTaskDetail(){
        coverApi.getHighTaskById({id:this.id}).then(res => {
          if(res?.data?.code == 200 && res?.data?.data){
            this.modeForm = res.data.data;
            this.searchForm = res.data.data;
            if(this.modeForm.dpart){
              this.modeForm.dpart = this.modeForm.dpart.split(',');
            }
            if(this.searchForm.taskQuarter == "2024-4" || this.searchForm.midUpdateFlag === "0"){//末期
              this.isEnd = true
            }
            if(this.modeForm.stype){
              this.getGroupMtypeList(this.modeForm.stype)
            }
          }else{
            this.modeForm = {};
            this.searchForm = {}
          }
        })
      },
  
      //校验
      handleSubmit(type) {
        this.$refs["searchForm"].validate(valid => {
          if (valid) {
            this.searchForm.id = this.id;
            this.searchForm.dpart = this.modeForm.dpart.join();
            if(type == "save"){
              this.handleSave()
            }
            else if(type == "approval"){
              this.handleConfirm()
            }
          }
        })
      },
  
      //保存
      handleSave(){
        coverApi.taskUpdate(this.searchForm).then(res => {
          if(res?.data?.code == 200){
            this.$Message.success({
              content: "更新成功",
              duration: 3
            });
            this.$emit('Close', true)
          }else{
            this.$Message.error({
              content: res?.data?.msg || "更新失败",
              duration: 3
            });
          }
        })
      },
  
      //确定提交
      handleConfirm(){
        this.searchForm.idList = [this.id];
        this.searchForm.taskQuarter = this.searchForm.taskQuarter ? this.searchForm.taskQuarter : "2024-2";
        coverApi.taskSubmit(this.searchForm).then(res => {
          if(res?.data?.code == 200){
            this.$Message.success({
              content: res?.data?.data || "提交审批成功",
              duration: 3
            });
            this.$emit('Close', true)
          }
          else{
            this.$Message.error({
              content: res?.data?.msg || "提交审批失败",
              duration: 3
            });
          }
        })
      },

      //获取小类
      getGroupMtypeList(key){
        coverApi.getGroupMtype({code:key}).then(res => {
          if(res?.data?.code == 200 && res.data?.data?.length){
            this.detailsInitiatives = res.data.data
          }
          else{
            this.detailsInitiatives = []
          }
        })
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .advanced-search-box {
    .foot-btn-box {
      padding-top: 30px;
      text-align: right;
      button {
        margin-left: 10px;
      }
      .primary-button {
          color: #fff;
          background-color: #ff6f4b;
          border-color: #ff6f4b;
          font-size: 80;
      }
    }
    /deep/.core-modal-footer {
      padding: 0;
    }
    
    .Selecequarters{
      display:flex;
      
    
      /deep/.ivu-form-item-content{
            margin-left: 2px;
            width: 200px;
    
      }
    }
  }
  </style>
  
  